<template>
	<view>
	  <u-sticky bgColor="#fff">
		<u-tabs name="cate_name" height="106" count="cate_count" :list="list" font-size="36" bar-height="8" active-color="#E70012" bar-width="80" :is-scroll="false" :current="current" @change="change"></u-tabs>
	  </u-sticky>
	  <view class="card-box">
		  <view v-for="(item,index) in dataList" class="card-item">
			  <image class="bg-image" mode="aspectFill" src="/static/images/itemBg.png"></image>
			  <image class="bg-image" mode="aspectFill" src="/static/images/bgCard.png"></image>
			  <image v-if="item.type == 1" class="type" mode="aspectFill" src="/static/images/gyjz-j.png"></image>
			  <image v-if="item.type == 0" class="type" mode="aspectFill" src="/static/images/xxhd-j.png"></image>
			  <view class="info">
				<image v-if="item.status == 0" class="status" mode="aspectFill" src="/static/images/dsh.png"></image>
				<image v-if="item.status == 1" class="status" mode="aspectFill" src="/static/images/ytg.png"></image>
				<image v-if="item.status == 2" class="status" mode="aspectFill" src="/static/images/wtg.png"></image>
			  </view>
			  <view class="content">
				  <view class="title">{{item.title}}</view>
				  <view class="time">申请时间：{{item.createTime}}</view>
			  </view>
			  <button class="button" @click="goDaohang(item)">去导航</button>
		  </view>
		  <uni-load-more :status="status"></uni-load-more>
	  </view>
  </view>
</template>

<script>
	
import { mySign } from '@/api/system/pubulic'
    export default {
        data() {
            return {
                list: [{
                    name: '全部',
                }, {
                    name: '待审核',
                }, {
                    name: '已通过'
                }, {
                    name: '未通过'
                }],
				current:0,
				status:"noMore",
				type:0,
				dataList:[],
				params:{
					pageNum:1,
					pageSize:10,
					type:0
				},
				total:0
            }
        },
		onLoad() {
			this.getList();
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		// 上拉加载
		onReachBottom() {
			if(this.total>this.params.pageNum*this.params.pageSize){
				this.status = "loading";
				this.params.pageNum++
				this.getList();
			}
		},
		methods: {
			goDaohang(item){
				uni.openLocation({
					latitude: parseFloat(item.lat),
					longitude: parseFloat(item.lng),
					name: item.addressName,
					address: item.address,
					success: function () {
						console.log('success');
					}
				});
			},
			getList(){
				mySign(this.params).then((res)=>{
					let list = res.data.rows;
					this.dataList = this.dataList.concat(list);
					this.total = res.data.total;
					this.status = this.total>this.params.pageNum*this.params.pageSize?"more":"noMore";
					uni.stopPullDownRefresh()
				})
			},
			change(index) {
				this.current = index;
				this.chongzhi();
			},
			chongzhi(){
				this.dataList = [];
				this.params={
						pageNum:1,
						pageSize:10,
						status:this.current
					}
				this.getList();
			},
		}
    }
</script>
<style scoped lang="scss">
	.button{
		position: absolute;
		right: 20rpx;
		bottom: 30rpx;
		font-size: 24rpx;
		background-color: #DE4B3B;
		color: #ffffff;
	}
	.card-box{
		padding: 54rpx 30rpx;
	}
	.card-item{
		position: relative;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		width: 690rpx;
		height: 340rpx;
		.bg-image{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
		.type{
			width: 180rpx;
			height: 60rpx;
			border-radius: 20rpx;
			position: absolute;
			top: 30rpx;
			left: 28rpx;
		}
		.info{
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			.status{
				width: 156rpx;
				height: 156rpx;
			}
		}
		.content{
			position: absolute;
			top: 166rpx;
			left: 28rpx;
			.title{
				font-weight: 700;
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 50rpx;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.time{
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 50rpx;
			}
		}
		.button-box{
			position: absolute;
			bottom: 20rpx;
			left: 30rpx;
			display: flex;
			.button{
				width: 168rpx;
				height: 68rpx;
				border-radius: 48rpx;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 68rpx;
			}
			.left{
				background: linear-gradient( 180deg, #EB6F55 0%, #DE4B3B 100%);
				color: #FFFFFF;
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(228,88,69,0.28);
				margin-right: 30rpx;
			}
			.right{
				background: linear-gradient( 180deg, #F9E5D2 0%, #F2C398 100%);
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(228,88,69,0.28);
				color: #FD8B23;
			}
		}
	}
</style>
